<!DOCTYPE html>
<html>
<head>
    <title>商学院小铺文档信息表</title>
    <#include "/header.html">
</head>
<body>
<style>
    th {
        text-align: center;
    }
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">文档封面</div>
                <div class="col-sm-10">
                    <input type="file" accept="image/png,image/jpg,image/jpeg" class="form-control" value="选择封面"
                           placeholder="文档封面" onchange="insertImg(this,'documentImgUrl')"/>
                    <img :src="bBusinessDocument.cover" alt="文档封面" id="imgUrl" style="width: 150px; height: 150px">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档标题</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessDocument.title" placeholder="文档标题"
                           maxlength="50"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档内容</div>
                <div class="col-sm-10">
                            <textarea class="form-control" v-model="bBusinessDocument.content" placeholder="文档内容"
                                      rows="8" maxlength="1000"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档地址</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bBusinessDocument.path"
                           placeholder="文档地址"/>
                    <input type="file" accept=".doc,.pdf,.docx" class="form-control" value="选择文档"
                           placeholder="文档地址" onchange="insertImg(this,'documentFileUrl')"/>
                    <a :href="bBusinessDocument.path" id="previewFile" target="_blank">预览</a>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档查看次数</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessDocument.lookCount"
                           placeholder="文档查看次数"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档大小</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessDocument.numberCount"
                           placeholder="文档大小"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档类型</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="types" value="1" v-model="bBusinessDocument.types"/> pdf
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="types" value="2" v-model="bBusinessDocument.types"/> word
                    </label>
                </div>
                <!--                <div class="col-sm-10">-->
                <!--                    <input disabled type="text" class="form-control" v-model="bBusinessDocument.types"-->
                <!--                           placeholder="文档类型 1-pdf 2-word"/>-->
                <!--                </div>-->
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">文档类别</div>
                <div class="col-sm-10">
                    <select id="categories" class="form-control" v-model="bBusinessDocument.categories">
                        <option value="-1" disabled selected hidden>请选择文档类别</option>
                        <!--                        <option value="1">小铺介绍</option>-->
                        <!--                        <option value="2">活动文档</option>-->
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">删除状态</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="deleteState" value="0" v-model="bBusinessDocument.deleteState"/> 删除
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="deleteState" value="1" v-model="bBusinessDocument.deleteState"/> 正常
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">公众号标识</div>
                <div class="col-sm-10">
                    <select id="gzhCode" class="form-control" v-model="bBusinessDocument.gzhCode">
                        <option value="-1" selected>全部平台</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建时间</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bBusinessDocument.createTime"
                           placeholder="创建时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">修改时间</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bBusinessDocument.updateTime"
                           placeholder="修改时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/bbusinessdocument.js?_${.now?long}"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

    //文档类别
    var bBusinessDictEntity = {
        type: "文档类型"
    };
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/bbusinessdict/queryAll',
        contentType: "application/json",
        data: JSON.stringify(bBusinessDictEntity),
        success: function (r) {
            if (r.code == 0) {
                for (var i = 0; i < r.bBusinessDict.length; i++) {
                    $("#categories").append(
                        "<option value=" + r.bBusinessDict[i].number + ">" + r.bBusinessDict[i].name + "</option>");
                }
            }
        }
    });

    // 公众号标识
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/buserinfo/getUserGzhList',
        contentType: "application/json",
        success: function (r) {
            if (r.code == 0) {
                for (var i = 0; i < r.userGzhList.length; i++) {
                    $("#gzhCode").append(
                        "<option value=" + r.userGzhList[i].gzhCode + ">" + r.userGzhList[i].gzhName + "</option>");
                }
            }
        }
    });

    function insertImg(e, pathname) {
        var files = e.files;
        var length = files.length;
        upload(files[0], pathname);
    }

    function upload(file, pathname) {
        console.log(filterSize(file.size));
        console.log(getFileExtendingName(file.name));
        var client = new window.OSS({
            region: 'oss-cn-shenzhen', // 你的oss地址，hangzhou，shanghai，shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS', //你的ak
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU', //你的secret
            //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注释掉
            bucket: 'zktuistatic', //你的oss名字
        });

        // 组装文件名
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath = yeaer + "" + month + "" + day;
        var key = "";
        key = pathname + "/" + datePath + "/document" + String(parseInt(Math.random() * 10000000, 10) + getFileExtendingName(
            file.name));

        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function (ret) {
            console.log(ret.res.requestUrls[0]);
            let reqUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");

            if (pathname == "documentImgUrl") {
                //文档封面
                let imgUrl = document.getElementById('imgUrl');
                vm.bBusinessDocument.cover = reqUrl;
                imgUrl.src = vm.bBusinessDocument.cover;
            } else if (pathname == "documentFileUrl") {
                //文档地址
                let previewFile = document.getElementById('previewFile');
                previewFile.style.display = "inline";
                vm.bBusinessDocument.path = reqUrl;
                previewFile.href = vm.bBusinessDocument.path;

                vm.bBusinessDocument.numberCount = filterSize(file.size);

                let types = getFileExtendingName(file.name)
                if (types == ".pdf") {
                    vm.bBusinessDocument.types = 1;
                } else if (types == ".doc" || types == ".docx") {
                    vm.bBusinessDocument.types = 2;
                }
            }
        }).catch(function (err) {
            console.log(err);
        });
    }

    function getFileExtendingName(filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }

    /**
     * 文件大小 字节转换单位
     * @param size
     * @returns {string|*}
     */
    const filterSize = (size) => {

        if (!size) return '';
        if (size < pow1024(1)) return size + ' B';
        if (size < pow1024(2)) return (size / pow1024(1)).toFixed(2) + ' KB';
        if (size < pow1024(3)) return (size / pow1024(2)).toFixed(2) + ' MB';
        if (size < pow1024(4)) return (size / pow1024(3)).toFixed(2) + ' GB';
        return (size / pow1024(4)).toFixed(2) + ' TB'
    }

    // 求次幂
    function pow1024(num) {
        return Math.pow(1024, num)
    }
</script>
</body>
</html>
